---
title: 'StudentsxCEOs League'
description: 'This website is used to promote StudentsxCEOs League, and provide form to register.'
category: 'Team of 6, as the project leader'
publishedAt: '2021-05-12'
techs: 'nextjs,tailwindcss'
banner: 'sxceosleague/ss-thumb_kzrsxq.png'
link: 'https://sxceosleague.com'
github: 'https://github.com/theodorusclarence/sxceosleague'
---

> ## Short Explanation

StudentsxCEOs League website was made to promote the event and provide registration solutions using Typeform. We developed this website using Next.js and Tailwindcss

> ## Project Goals

This project objective is to give information and guide the user to
register for the pre-event, challenges, and conference through
Typeform. This website is used to attract as much visitor as possible
and give them information and knowledge about this event.

<blockquote className='with-icons'>
  ## Tech Stack Used
  <div className='not-prose mt-2'>
    <TechIcons techs={['nextjs', 'tailwindcss']} />
  </div>
</blockquote>

This project was made using Next.js and Tailwindcss. For a static
site, I tend to use Next.js and Tailwindcss for a better Developer
Experience and faster loading speed. Using Next.js also makes data
management easier by storing all of the data in the js file, then map
it out on the page. With this structure, it is very easy to add or
change something because we only need to change the data the markup
will follow.

<SplitImage>
  <Split>
    <CloudinaryImg
      className='!mb-0'
      publicId='theodorusclarence/sxceosleague/ss1_wgdcwp.png'
      alt='Screenshot 1'
      width={800}
      height={1271}
    />
  </Split>
  <Split>
    <CloudinaryImg
      className='!mb-0'
      publicId='theodorusclarence/sxceosleague/ss2_lrhcjn.png'
      width={800}
      height={1023}
      alt='Web Screenshot'
    />
    <CloudinaryImg
      publicId='theodorusclarence/sxceosleague/ss3_orb5oe.png'
      width={800}
      height={440}
      alt='Web Screenshot'
    />
  </Split>
</SplitImage>

> ## Spotlight

### 'Linktree-like' page

In this website, we implement a page for linktree-like buttons so the
user that is get redirected from the Instagram can get easier access
to the page and socials

<CloudinaryImg
  mdx
  publicId='theodorusclarence/sxceosleague/ss4_hqmquo'
  alt='ss4'
  width={450}
  height={792}
/>

> ## The Problems and How I Deal With It

There is a lot of complex layout in this project, especially because
in this design there is a lot of objects that are
absolutely-positioned, and we need to think of a strategy to make it
work both on mobile and desktop.

I also lead this project and helped on designing and developing the
overall site, designing this was challenging because we want to
achieve a design that represents the Graphic Standard Model

> ## Lessons Learned

This is the first project that I had with some team members in their
own expertise such as UI Designers and Developer. I keep track of
everything in notion app and assign the task on that app. It is really
fun working with a lot of people and try bunch of new ideas and
communicate our differences

I also learned a lot about developing a website with a bunch of
floating illustrations and absolutely-positioned elements. I usually
avoid making designs with illustrations that are
absolutely-positioned, but this project has been a lot of fun to
develop.
